import tpl from './list.tpl'
import './list.scss'

import $ from 'jquery'
import { tplReplace } from '../../../utils/tools'

export default _ => {

    let begin = 0,          // 记录我的起始滑动距离
        recorBegin = 0,     // 备份当前y轴所处的位置
        wholeY = 0,         // 页面滑动Y轴
        _obj = null,        // 存储传递过来的数据
        VideoCtx = null;    // 存放视频元素

    return {
        name:'list',
        // 处理数据渲染页面
        tpl( data ) {
            let list = '';
            data.forEach( ( item, index ) => {
                list += tplReplace( tpl, {
                    src: item.src,
                    title: item.title,
                    muted: item.muted,
                    play: index == 0 ? true : false,
                    index
                })
            })
            _obj = data;
            return list;
        },

        // 初始化事件
        bindEvent( Movefn, Endfn ) {
            const VideoMain = $('.videoMain');
            this.VideoStatus();
            VideoMain.on('touchstart', e => this.start( e ) );
            VideoMain.on('touchmove', e => this.move( e, Movefn ) );
            VideoMain.on('touchend', e => this.end( e, Movefn, Endfn ) );
        },

        VideoStatus() {
            VideoCtx = $('video');
            for( let i = 0; i < VideoCtx.length; i++ ) {
                i == 0 ? VideoCtx[i].play() : VideoCtx[i].pause();
            }
        },

        start( e ) {
            begin = e.touches[0].pageY;
            recorBegin = wholeY;
        },

        move( e, Movefn ) {
            let MoveY = e.touches[0].pageY - begin;
            wholeY = MoveY + recorBegin;
            Movefn( wholeY );
        },

        end( e, Movefn, Endfn ) {
            // 滑动结束的距离 - 起始滑动的距离
            const endY = e.changedTouches[0].pageY - begin,
                    Index = parseInt(e.target.id),                       // 当前滑动的下标
                    clientY = $(document.body).height();                // 获取页面可视区域
                    
            if ( Math.abs( endY ) < clientY / 4 ) {
                this.defaultInit( Movefn );
            } else {
                
                // 切换到下一屏
                if ( endY < 0 ) {
                    // 向下切屏
                    this.SlideDown( Movefn, Index, clientY );
                } 
                // 切换到上一屏
                else {         
                    // 向上切屏       
                    this.SlideUp( Movefn, Index, clientY );
                }

            }
            // 添加过渡效果 解决切屏生硬问题
            Endfn();

        },

        SlideDown( Movefn, Index, clientY ) {
            if ( _obj[Index + 1] ) {
                // 切屏后暂停当前视频
                VideoCtx[Index].pause();
                // 切屏后播放下一条视频
                VideoCtx[Index + 1].play();
                wholeY = recorBegin - clientY;
                Movefn( wholeY );
            } else {
                this.defaultInit( Movefn );
            }
        },

        SlideUp( Movefn, Index, clientY ) {
            if ( _obj[Index - 1] ) {
                // 切屏后暂停当前视频
                VideoCtx[Index].pause();
                // 切屏后播放下一条视频
                VideoCtx[Index - 1].play();
                wholeY = recorBegin + clientY;
                Movefn( wholeY );
            } else {
                this.defaultInit( Movefn );
            }
        },

        // 切屏失败后初始化距离 往回弹
        defaultInit( Movefn ) {
            wholeY = recorBegin;
            Movefn( recorBegin );
        }

    }
}